<template>
  <div ref="refChart" :style="{ height: kHTwo * 2 + 'px'}"></div>
</template>

<script>
import theme from '../../assets/theme/theme'

const wuhanJson = require("../../assets/map/wuhan.json")
export default {
  name: 'C3',
  data() {
    return {
      chartInstance: null,
      allData: [],
      kHTwo: null,
      MapDataList: [
        {
          name: "江汉区",
          value: 100,
          perf: "10%",
        },
        {
          name: "江岸区",
          value: 150,
          perf: "15%",
        },
        {
          name: "硚口区",
          value: 50,
          perf: "5%",
        },
        {
          name: "青山区",
          value: 70,
          perf: "7%",
        },
        {
          name: "洪山区",
          value: 70,
          perf: "7%",
        },
        {
          name: "武昌区",
          value: 10,
          perf: "1%",
        },
        {
          name: "汉阳区",
          value: 200,
          perf: "20%",
        },
        {
          name: "蔡甸区",
          value: 35,
          perf: "3.5%",
        },
        {
          name: "东西湖区",
          value: 35,
          perf: "3.5%",
        },
        {
          name: "汉南区",
          value: 40,
          perf: "4%",
        },
        {
          name: "江夏区",
          value: 100,
          perf: "7%",
        },
        {
          name: "新洲区",
          value: 70,
          perf: "7%",
        },
        {
          name: "黄陂区",
          value: 70,
          perf: "7%",
        }
      ],
      // 屏幕自适应定时器
      screenTimer: null,
      // 数据刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHTwo = Math.round(this.screenHeight * 0.44)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 屏幕自适应
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
    // 数据刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除数据刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenWidth, false);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      // 四舍五入取整数
      this.kHTwo = Math.round(this.screenHeight * 0.44);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.refChart, theme);
      this.$echarts.registerMap('wuhan', wuhanJson)
      const initOption = {
        layoutCenter: ['50%', '50%'],//位置
        layoutSize: '70%',//大小
        title: {
          text: '武汉地图',
          left: 'center'
        },
        tooltip: { // 鼠标移到图里面的浮动提示框
          trigger: 'item',
          confine: true,
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let localValue, perf, downloadSpeep, usability, point;
            if (params.data) {
              localValue = params.data.value;
              perf = params.data.perf;
              downloadSpeep = params.data.downloadSpeep;
              usability = params.data.usability;
              point = params.data.point;
            } else {// 为了防止没有定义数据的时候报错写的
              localValue = 0;
              perf = 0;
            }
            return `<div style='font-size:18px;'> ${params.name}</div>
                                <p style='text-align:left;margin-top:-4px;'>网点数量：${localValue}<br/>占比：${perf}<br/></p>`;
          },
          backgroundColor: "#ff7f50", //提示标签背景颜色
          textStyle: {color: "#fff"}, //提示标签字体颜色
          padding: [5, 10, 0, 10],  // 设置上下的内边距为 5,0，左右的内边距为 10
        },
        visualMap: {
          show: true,
          bottom: 10,
          left: 10,
          // left: 50, top: '30%', right: 0, bottom: 0,  //定位的左上角以及右下角分别所对应的经纬度
          text: ["200", "0"],
          min: 0,
          itemHeight: 200,  //图形的高度，即长条的高度。
          color: [
            '#ee6666',//红色
            '#fc8452',//橙色
            '#fac858',//黄色
            '#9a60b4',//紫色
            '#ea7ccc',//淡紫
            '#3ba272',//绿色
            '#91cc75',//浅绿
            '#5470c6',//蓝色
            '#73c0de',//淡蓝
          ]
        },
        geo: {  // 地理坐标系组件用于地图的绘制// geo配置详解： https://echarts.baidu.com/option.html#geo
          map: "wuhan", // 表示中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
            show: true
          },
          emphasis: {  // 地图区域的多边形 图形样式。
            borderColor: "#ffffff",//未选中的状态
            areaColor: "#D8E9FD", //背景颜色
            label: {
              show: true, //显示名称
            },
            itemStyle: {  //选中的状态// 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              borderColor: "#fff",
              areaColor: "#DA3A3A",
            },
          },
        },
        series: [

          {
            // name: "地图", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
            },
            // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
            data: this.MapDataList,
          }
        ]
      }
      // 图表初始化配置
      this.chartInstance.setOption(initOption);
    },
    screenAdapter() {
      this.titleFontSize = (this.$refs.refChart.offsetWidth / 100) * 1.8;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 1.5),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 1.5),
          },
        }
      };
      // 图标自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        // this.getData();
      }, 5000)
    }
  }
}
</script>
